<template>
	<view class="page">
		<Update v-if="updatePopup" :versionInfo="versionInfo"></Update>
		<view class="top">
			<swiper autoplay  circular interval="2000" class="topswiper">
				<swiper-item v-for="(item,index) in getbanner" :key="index">
					<image :src="item" class="summer"></image>
				</swiper-item>
			</swiper>
		
			<!-- <view class="search-wrap" @click="toSearch">
				<image src="/static/img/search.png"></image>
				<text style="color: #555">商品名称/关键词</text>
			</view> -->
		</view>
		<view class="category-container">
			<scroll-view class="left-menu" scroll-y>
			<!-- 	<view class="menu-item"  @click="toSearch" :style="menuIndex == -1?'background:#fff':''">推荐商品
					<view class="line" v-if="menuIndex == -1"></view>
				</view> -->
				<view class="menu-item" v-for="(item,index) in leftMenuList" :key="index" @click="menuClick(item,index)" :style="menuIndex == item.id?'background:#fff':''">{{item.title}}
					<view class="line" v-if="menuIndex == item.id"></view>
				</view>
			</scroll-view>
			<scroll-view scroll-y class="right-scroll" @scroll="scroll" :scroll-top="scrollTop">
				<view class="right-menu">
					<view class="by-sales" @click="sellRank('asc')">
						<text>按销量排行</text>
						<image src="/static/img/rank.png" v-if="sellFlag"></image>
						<image src="/static/img/yellow-arrow.png" v-if="!sellFlag"></image>
					</view>
					<view class="by-price" @click="priceRank('asc')">
						<text>按价格排行</text>
						<image src="/static/img/rank.png" v-if="priceFlag"></image>
						<image src="/static/img/yellow-arrow.png" v-if="!priceFlag"></image>
					</view>
					<view class="select" @click="select">
						<text>筛选</text>
						<image src="/static/img/select.png"></image>
					</view>
				</view>
				<view style="height: 90rpx;"></view>
				<view class="right-content" v-for="(item,index) in categoryGoods" :key="index" @click="toDetail(item.b_id)">
					<image :src="item.imgurl"></image>
					<view class="goods-info">
						<text class="goods-name">{{item.b_name}}</text>
						<view class="tag-one" v-for="(lb,i) in item.label" :key='i' :class="i==0?'mar20':''" v-if="i<2">
							<text>{{lb}}</text>
						</view>
						<text class="price">￥{{item.sale_price}}</text>
						<text class="original-price">原价：{{item.old_price}}</text>
						<text class="sell-count">销量：{{item.real_num}}件</text>
					</view>
				</view>
				<view class="meiyou" @click="goods_next()" v-if="no_goods_data==0 && categoryGoods.length>0">加载更多</view>
				<view class="meiyou" v-if="no_goods_data==1 && categoryGoods.length>0">没有更多了</view>
				<view class="meiyou" v-if="categoryGoods.length==0">暂无商品 ~</view>
			</scroll-view>
		</view>
		<!-- 筛选弹窗 -->
		<category-selected @child-event="close" v-if="selectFlag" :secondSelectList="secondSelectList" v-on:fenlei="fenlei" :selectIndex="selectIndex" :currentId="currentId" @classson="getMsgFormSon"
		 @sonid="getMsgSonid"> </category-selected>
	</view>
</template>

<script>
	import Update from '@/components/Update';
	
	import CategorySelected from '@/components/CategorySelected';
	import ComHeader from '@/components/ComHeader';
	import {
		request
	} from "../../request/index.js";
	export default {
		data() {
			return {
				menuIndex: 1,
				// 左侧的菜单数据
				leftMenuList: [],
				categoryGoods: [],
				idList: [],
				secondSelectList: [], // 筛选菜单
				sellFlag: true,
				smark: 0,
				priceFlag: true,
				pmark: 0,
				selectFlag: false,
				smark1: 0,
				currentId: 1,
				currentpid: 0,
				getbanner: '',
				keywords: '',
				selectIndex:-1,
				// 商品分页
				goods_page: 1,
				curr_item: {},
				curr_index:'',
				no_goods_data:0,
				sonid:'',
				scrollTop: 0,
				updatePopup:false,
				old: {
				    scrollTop: 0
				    },
					
			}

		},
		onLoad(options){
			this.getCategoryList();
			// this.getCategoryGoods();
			// this.priceRank();
			//请求banner
			this.banner();
			// this.clickCategoryGoods();
			// this.queryAll()
			//获取强制更新缓存
			this.fore();
		},
		onShow() {
			//获取强制更新缓存
			this.fore();
			this.categoryGoods=[]

			// var _index = uni.getStorageSync('recommendIndex')
			// console.log(_index,'11')

			var _index = 1
			if(uni.getStorageSync('recommendIndex')!=null){
				_index = uni.getStorageSync('recommendIndex')
			}  

			if(_index!=1){
				this.menuIndex = _index
				uni.setStorageSync('recommendIndex',1)
				console.log(this.menuIndex)
				//商品信息
				this.$api.getGoodsList({
					class_pid: this.menuIndex
				}).then(res => {
					//重新给商品页面赋值数据
					this.categoryGoods = res.data.data
					
				
				})
				//查询子分类
				this.clickCategoryGoods();
				
			}else{
				this.queryAll()
			}
			
		},
		components: {
			ComHeader,
			CategorySelected,
			Update,
		},
		onHide() {
			this.selectFlag=false;
		},
		methods: {
			//强制更新缓存
			fore(){
				var that = this
				let version = uni.getStorageSync('fore')
				
				console.log(uni.getStorageSync('fore'),'强制更新缓存开始')
				if(version.status == 1){
					//status= 1 说明更新 返回数据
					that.updatePopup = true;
					that.versionInfo = uni.getStorageSync('fore')
				}else{
					//删除缓存
					uni.removeStorageSync("fore")
					this.updatePopup = false;
				}
			},
			toDownload(){
				
				uni.navigateTo({
					url:'/pages/download/download?url='+this.versionInfo.url+'&note='+this.versionInfo.note+'&version='+this.versionInfo.version+'&size='+this.versionInfo.size+'&update_time='+this.versionInfo.update_time
				})
			},
			
			closeUpdatePopup() {
				//删除缓存
				uni.removeStorageSync("fore")
				this.updatePopup = false;
			
			},
			/* ------------------强制更新缓存结束---------------------- */
			
			scroll: function(e) {
			  
			    this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
			            this.scrollTop = this.old.scrollTop
			            this.$nextTick(function() {
			                this.scrollTop = 0
			            });
			},
			queryAll(){
				this.menuIndex = 1
				this.$api.getGoodsList().then(res => {
					//重新给商品页面赋值数据
					this.categoryGoods = res.data.data
				})
			},
			toSearch() {
				this.menuIndex = 1
				this.$api.getGoodsList({
					keywords: this.keywords
				}).then(res => {
					//重新给商品页面赋值数据
					this.categoryGoods = res.data.data
				})
				// uni.navigateTo({
				// 	url: '/pages/search/Search'
				// })
			},
			//分类banner
			banner() {
				this.$api.getSwiperList({
					type: 2
				}).then(res => {
					//重新给商品页面赋值数据
					this.getbanner = res.data.data
				})
			},
			// 点击左侧商品菜单  查询子分类 查询商品信息
			menuClick(item, index) {
				uni.setStorageSync('recommendIndex',item.id)
				if(item.id==1){
					this.menuIndex = item.id;
					this.toSearch()
					return
				}
				// this.sonid=0
				this.menuIndex = item.id;
				this.curr_item = item;
				this.curr_index = item.id;
				// this.menuIndex = index;
				this.currentId = item.id;
				this.selectIndex=-1;
				this.no_goods_data=0;
				//商品信息
				this.$api.getGoodsList({
					class_pid: this.currentId,
					is_page: 1,
					page:this.goods_page
				}).then(res => {
					//重新给商品页面赋值数据
					this.categoryGoods=res.data.data
					this.goTop()
				
					this.goods_page = 1;
				})
				//查询子分类
				this.clickCategoryGoods();
			},
			goods_more(){
				this.menuIndex = this.curr_index;
				this.currentId = this.curr_item.id;
				//商品信息
				this.$api.getGoodsList({
					class_pid: this.currentId,
					is_page: 1,
					page:this.goods_page
				}).then(res => {
					//重新给商品页面赋值数据
					for (let i in res.data.data) {
						this.categoryGoods.push(res.data.data[i])
					}
					this.goods_page = res.data.page.currentPage;
					if	(res.data.page.lastPage <= this.goods_page) {
						this.no_goods_data = 1
					}
				})
			},
			goods_next(){
				this.goods_page += 1;
				this.goods_more();
			},
			fenlei(id,index){
				var a={
					class_pid: this.currentId,
				}
				if(id!=0){
					a.class_id=id;
				}
				this.$api.getGoodsList(a).then(res => {
					this.categoryGoods = res.data.data
				})
				this.selectIndex=index;
				this.select();
			},
			//商品详情
			toDetail(id) {
				uni.setStorageSync('recommendIndex',this.menuIndex)
				uni.navigateTo({
					url: '/pages/goods/GoodsDetail?id=' + id
				})
			},
			// 获取商品分类
			getCategoryList() {
				
					this.$api.getGoodsTitleList({
				
					}).then(result => {
						this.leftMenuList = result.data.data;
						let recommend = {
							title: '推荐商品',
							id:1
						}
						this.leftMenuList.unshift(recommend);
					
						var a={
							id:result.data.data[0].id
						}
					
						console.log(result.data.data, '左侧分类',this.currentId);
					
					})
			},
			// 获取分类商品
			getCategoryGoods() {
				this.$api.getGoodsList({
				}).then(result => {
					this.categoryGoods = result.data.data;
				})
			},


			//销量排行触发
			sellRank(mark) {
				this.sellFlag = !this.sellFlag;
				if (this.smark == 0) {
					mark = 'desc';
					this.smark = 1;
				} else {
					mark = 'asc';
					this.smark = 0;
				}
				this.orderBySell(mark);
			},
			// 按销量排行
			orderBySell(mark) {
				//按销量排行  正序：asc  倒序  desc
				if (this.smark1 == 0) {
					mark = 'desc';
					this.smark1 = 1;
				} else {
					mark = 'asc';
					this.smark1 = 0;
				}
			
				if(this.sonid==''){
					this.$api.getGoodsList({
						
						class_pid:this.currentId,
						order: 'fake_num',
						mark: mark
					}).then(res => {
						this.categoryGoods = res.data.data;
						
					})
				}else{
					this.$api.getGoodsList({
						class_id: this.sonid,
						class_pid: this.currentId,
						order: 'fake_num',
						mark: mark
					}).then(res => {
					
						this.categoryGoods = res.data.data;
						
					})
				}

			},
			//筛选价格
			priceRank(mark) {
				this.priceFlag = !this.priceFlag;
				if (this.pmark == 0) {
					mark = 'desc';
					this.pmark = 1;
				} else {
					mark = 'asc';
					this.pmark = 0;
				}
				//价格接口   正序：asc  倒序  desc
				if(this.sonid==''){
					this.$api.getGoodsList({
						class_pid:this.currentId,
						order: 'sale_price',
						mark: mark
					}).then(res => {
						this.categoryGoods = res.data.data;
						
					})
				}else{
					this.$api.getGoodsList({
						class_id: this.sonid,
						class_pid: this.currentId,
						order: 'sale_price',
						mark: mark
					}).then(res => {
						// this.secondId = res.data.data.id
						this.categoryGoods = res.data.data;
						
					})
				}
				
			},


			//获取儿子（子页面）返回来的数据 重新赋值到页面
			getMsgFormSon(data) {
				this.categoryGoods = data;
			},
			//获取儿子（子页面）返回来的数据 重新赋值到页面
			getMsgSonid(data) {
				this.sonid = data;
			},


			//筛选展示弹窗
			select() {
				this.selectFlag = !this.selectFlag;
			},



			// 分类页商品接口
			clickCategoryGoods() {
				this.$api.getGoodsTitleList({
					pid: this.currentId
				}).then(res => {
					this.secondSelectList = res.data.data;
				})
			},
			close(){
				this.selectFlag=false;
			}



		}
	}
</script>
<style scoped>
	.page {
		padding-top: (--status-bar-height);
		width: 100%;
		height: (--status-bar-height);
	}

	.top {
		position: fixed;
		width: 750rpx;
		height: 360rpx;
		z-index: 99;
	}

	.topswiper {
		width: 100%;
		height: 100%;
	}

	.search-wrap {
		position: absolute;
		top: 10rpx;
		left: 30rpx;
		width: 690rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -2rpx 18rpx 0rpx rgba(219, 219, 219, 0.52);
		opacity: 0.65;
		border-radius: 36rpx;
	}

	.search-wrap image {
		width: 32rpx;
		height: 32rpx;
		margin-left: 167rpx;
	}

	.search-wrap text {
		position: absolute;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ccc;
		margin-left: 20rpx;
	}

	.summer {
		width: 750rpx;
		height: 360rpx;
	}

	.category-container {
		display: flex;
		height: calc(100vh - 360rpx - var(--status-bar-height));
		position: fixed;
		bottom: 0rpx;
		width: 100%;
	}

	.left-menu {
		position: relative;
		flex: 2;
		/* height: calc(100vh - 50px - (var(--status-bar-height) + 360rpx)); */
		height:100%;
		width: 172rpx;
	}

	.right-content-wrap {
		flex: 5;
	}

	.right-scroll {
		/* height: calc(100vh - 62px - (var(--status-bar-height) + 360rpx)); */
		height:calc(100vh - 360rpx - var(--status-bar-height) );
		padding-bottom:15px;
	}
	.menu-item {
		display: flex;
		width: 172rpx;
		height: 88rpx;
		justify-content: center;
		align-items: center;
		background: #F8F8F8;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		position: relative;
	}

	.right-menu {
		position: fixed;
		z-index: 100;
		display: flex;
		width: 569rpx;
		height: 90rpx;
		background: #fff;
		margin-left: 10rpx;
	}

	.by-sales,
	.by-price {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 199rpx;
		height: 90rpx;
	}

	.by-sales text,
	.by-price text,
	.select text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.by-sales image,
	.by-price image {
		width: 10rpx;
		height: 22rpx;
		margin-left: 10rpx;
	}

	.by-price {
		width: 199rpx;
		height: 90rpx;
	}

	.select {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 170rpx;
		height: 90rpx;
	}

	.select image {
		width: 22rpx;
		height: 22rpx;
		margin-left: 10rpx;
	}

	.right-content {
		flex: 5;
		position: relative;
		display: flex;
		width: 558rpx;
		height: 198rpx;
		margin-left: 10rpx;
		border: 1rpx solid #eee;
		margin-top: 20rpx;
		border-radius: 20rpx;
		box-shadow:0rpx -4rpx 8rpx 0rpx rgba(250,250,250,0.95), 0px 4rpx 8rpx 0px rgba(204,204,204,1);
	}

	.right-content image {
		width: 178rpx;
		height: 178rpx;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.goods-name {
		display: block;
		width: 300rpx;
		
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		margin-left: 20rpx;
		margin-top: 10rpx;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.tag-one {
		display:inline-block;
		width: auto;
		height: 24rpx;
		line-height: 24rpx;
		background: rgba(222, 245, 255, 1);
		border: 1rpx solid rgba(185, 233, 255, 1);
		border-radius: 4rpx;
		margin-right: 20rpx;
		/* margin-top: 5rpx; */
		padding:0px 6px;
		/* float:left; */
	}
	.mar20{
		margin-left:20rpx;
	}

	.tag-one text {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(72, 180, 231, 1);
	}

	.tag-two {
		width: 100rpx;
		height: 24rpx;
		line-height: 24rpx;
		background: rgba(222, 245, 255, 1);
		border: 1rpx solid rgba(185, 233, 255, 1);
		border-radius: 4rpx;
		margin-left: 130rpx;
		/* margin-top: -28rpx; */
	}

	.tag-two text {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(72, 180, 231, 1);
	}

	.price {
		display: block;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254, 177, 71, 1);
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.original-price {
		display: block;
		margin-left: 20rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		text-decoration: line-through;
	}

	.sell-count {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.line {
		position: absolute;
		left: 0;
		width: 10rpx;
		height: 88rpx;
		background: rgba(254, 177, 71, 1);
	}
	.meiyou{
		width:100%;
		height:120rpx;
		line-height:120rpx;
		font-size:14px;
		color:#999;
		text-align:center;
	}
</style>
